<%@include file="startUpIncludes.jsp" %>
        <title>
            New Invoice
        </title>
    <script type="text/javascript" src="../js/invoiceTable.js"></script>
    <script type="text/javascript">
//    function clickME() {
// 	   alert("click me");
//     	document.getElementById("txt").value="";
//     	var divs = document.getElementsByName("searchBothResultRow");
//     	alert("modal content" + divs[0].parentNode.innerHTML);
//     		divs[0].parentNode.innerHTML = "";
    	
//     	}
	  // $('.searchBothResultRow').remove();
</script>
    </head>
    <body>
    <jsp:include page="header.jsp" >
		<jsp:param value="true" name="loggedIn"/>
	</jsp:include>
    <div class="modal-win-bg">
        <div class="modal-win-box ">
            <div class="modal-win-hd">
                <span class="modal-win-title"></span>
                <span class="modal-win-close">x</span>
            </div>
            <div id="div" class="modal-win-content"></div> 
            <div class="searchBoth">
	            <input name='query' type='text' class='TB' id='txt' />
	            <a class="form-btn modal-win-start srchModalSrchBtn" id="searchcontact">Search Contact</a>
	            <a class="form-btn modal-win-start srchModalSrchBtn" id="searchSkuMod">Search Product</a>
            </div>
            <a class="form-btn  disable" id="choose" >Choose</a>
        </div>
    </div>
    <div class="wrap">
	<div class="fitBG">
        <div class="main">
		<%@include file="basicLeftMenu.jsp" %>
            <div class="content">
				<jsp:include page="tabs.jsp" >
					<jsp:param value="invoice" name="currentPage"/>
				</jsp:include>
                <div class="tab-content">
                <h3>New Invoice</h3>
                <form:form cssClass="new-lead-form" commandName="categoryForm" method="post" action="/sales/s/new-invoice" id="newCategoryForm">
                <form:errors path="*" cssClass="error-block" element="div"/>
                <div class="btns">
                <input type="submit" value="Save" class="form-btn"/><a  href="/sales/s/invoices" class="form-btn">Cancel</a>
                </div>
                <div class="form-row">
                    <h4>Invoice Information</h4>
                    <!-- <div class="info"><label>Name: </label><span>${userDetails.fName} ${userDetails.lName}</span></div> -->
                     <div class="input-col">
                        <label>Contact: </label>
                        <form:input name="" class="TB fire-modal-win fire-contact-search tab-content-subtitle contactSearchParent" onfocus="clickME();" path="contactedPerson"/>
                        <form:hidden name="contactedPerson" path="contactedPersonId" value="" id="contactedPersonId"/>
                    </div>
                    <div class="input-col">
                        <label>Invoice Number: </label>
                        <form:input path="code" cssClass="TB" name="code"/>
                    </div>
                </div>
                <div class="form-row">
                    <div class="input-col">
                    	<input type="checkbox" name="invoiceType" value="product" class="chbox" id="chboxProduct" checked/>
                        <span>Product Invoice: </span>
                    	<input type="checkbox" name="invoiceType" value="service" class="chbox" id="chboxService" checked/>
                        <span>Service Invoice: </span>
                    </div>
                </div>
                <div class="form-row">
					<div class="invoice-tables">
					<script type="text/javascript">
					var taxIdList = new Array();
					var taxNameList = new Array();
					taxIdList.push("0");
					taxNameList.push("None");
					</script>
					<c:forEach items="${taxes}" var="tax">
						<script>
						taxIdList.push("${tax.percentage}");
						taxNameList.push("${tax.name}");
						console.log("taxes... " + taxNameList[0]);
						</script>
					</c:forEach>
						<%@include file="invoice-table.jsp" %>
			<script>
			for(selTaxIndex=1; selTaxIndex<=3; selTaxIndex++){
				var tax1Sel = document.getElementById("skuTaxOne" + selTaxIndex);
				var tax2Sel = document.getElementById("skuTaxTwo" + selTaxIndex);
				var tax3Sel = document.getElementById("serviceTaxOne" + selTaxIndex);
				var tax4Sel = document.getElementById("serviceTaxTwo" + selTaxIndex);
				for(optTaxIndex=0; optTaxIndex<taxIdList.length; optTaxIndex++){
					tax1Sel.innerHTML+= "<option value='" + taxIdList[optTaxIndex] + "'>" + taxNameList[optTaxIndex] + "</option>";
					tax2Sel.innerHTML+= "<option value='" + taxIdList[optTaxIndex] + "'>" + taxNameList[optTaxIndex] + "</option>";
					tax3Sel.innerHTML+= "<option value='" + taxIdList[optTaxIndex] + "'>" + taxNameList[optTaxIndex] + "</option>";
					tax4Sel.innerHTML+= "<option value='" + taxIdList[optTaxIndex] + "'>" + taxNameList[optTaxIndex] + "</option>";
				}
			}
			</script>
					<a id="addProd" class="addLine">Add Product</a>
					<a id="addService" class="addLine">Add Service</a>
					<input type="hidden" name="skuTrCount" value="3" id="skuTrCount"/>
					<input type="hidden" name="serviceTrCount" value="3" id="serviceTrCount"/>
					<input type="hidden" name="invoiceTotal" value="0" id="invoiceTotal"/>
					<input type="hidden" name="discountTotal" value="0" id="discountTotal"/>
					</div>
                </div>
                <div class="btns">
                <input type="submit" value="Save" class="form-btn" action = "/sales/s/new-invoice"/><a href="/sales/s/invoices" class="form-btn">Cancel</a>
                </div>
                </form:form>
                </div>
            </div>
        </div>
        
    <%@include file="footer.jspf" %>
    </div>
    </div>

    </body>
</html>